<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AdminLTE | Calendar</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <script src="../static/js/right/jquery.min.js"></script>
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- font Awesome -->
    <link href="../static/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <!-- Ionicons -->
    <link href="../static/css/ionicons.min.css" rel="stylesheet" type="text/css"/>
    <!-- fullCalendar -->
    <link href="../static/css/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css"/>
    <link href="../static/css/fullcalendar/fullcalendar.print.css" rel="stylesheet" type="text/css" media='print'/>
    <!-- Theme style -->
    <link href="../static/css/AdminLTE.css" rel="stylesheet" type="text/css"/>
    <link href="../static/css/ace-ie.min.css"/>
    <link href="../static/css/ace-rtl.min.css"/>
    <link href="../static/css/ace-skins.min.css" />
    <link href="../static/css/ace.min.css"/>
</head>
<body class="skin-blue" style="overflow: hidden">
<!-- header logo: style can be found in header.less -->
<header class="header">
    <a href="index.html" class="logo">
        <!-- Add the class icon to your logo image or logo icon to add the margining -->
        AdminLTE
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top" role="navigation">
        <!-- Sidebar toggle button-->
        <a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <div class="navbar-right">
            <ul class="nav navbar-nav">
                <!-- User Account: style can be found in dropdown.less -->
                <li class="dropdown user user-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="glyphicon glyphicon-user"></i>
                        <span>个人中心<i class="caret"></i></span>
                    </a>
                    <ul class="dropdown-menu">
                        <!-- User image -->
                        <li class="user-header bg-light-blue">
                            <img src="../static/img/pers/rw1.png" class="img-circle" alt="User Image"/>
                            <p>
                                我
                            </p>
                        </li>
                        <!-- Menu Body -->
                        <li class="user-body">
                            <div class="col-xs-4 text-center">
                                <a href="/findManger">个人信息</a>
                            </div>
                            <div class="col-xs-4 text-center">
                                <a href="/findAllLogs">操作日志</a>
                            </div>
                            <div class="col-xs-4 text-center">
                                <a href="/login">退出登录</a>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="left-side sidebar-offcanvas">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel -->
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="../static/img/pers/rw1.png" class="img-circle" alt="User Image"/>
                </div>
                <div class="pull-left info">
                    <p>你好，管理员</p>

                    <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
                </div>
            </div>
            <!-- search form -->
            <form action="#" method="get" class="sidebar-form">
                <div class="input-group">
                    <input type="text" name="search" class="form-control" placeholder="搜索..."/>
                    <span class="input-group-btn">
                                <button type='submit' name='searchtoUrl' id='search-btn' class="btn btn-flat"><i
                                        class="fa fa-search"></i></button>
                            </span>
                </div>
            </form>
            <!-- /.search form -->
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu">
                <li>
                    <a href="index.html">
                        <i class="fa fa-dashboard"></i> <span>首页</span>
                    </a>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-bar-chart-o"></i>
                        <span>日志管理</span>
                        <i class="fa fa-angle-left pull-right"></i>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="/LogCatchPre"><i class="fa fa-angle-double-right"></i> 日志获取</a></li>
                        <li><a href="LogAnalysis.html"><i class="fa fa-angle-double-right"></i> 日志分析</a></li>
                        <li><a href="LogWarn.html"><i class="fa fa-angle-double-right"></i> 日志报警</a></li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-table"></i> <span>系统管理</span>
                        <i class="fa fa-angle-left pull-right"></i>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="/SysRightPre"><i class="fa fa-angle-double-right"></i> 权限管理</a></li>
                        <li><a href="/PersRightPre"><i class="fa fa-angle-double-right"></i> 人员管理</a></li>
                    </ul>
                </li>
                <li class="active">
                    <a href="calendar.html">
                        <i class="fa fa-calendar"></i> <span>日历</span>
                    </a>
                </li>
                <li>
                    <a href="/findAllMailsInBox">
                        <i class="fa fa-envelope"></i> <span>邮箱</span>
                    </a>
                </li>
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Right side column. Contains the navbar and content of the page -->
    <aside class="right-side">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                日历
                <small>Control panel</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li class="active">日历</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="row">
                        <div class="col-sm-9">
                            <div class="space"></div>
                            <div id="calendar"></div>
                        </div>
                    </div>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </section><!-- /.content -->
    </aside><!-- /.right-side -->
</div><!-- ./wrapper -->
<!--<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<script src="https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->

<!-- jQuery UI 1.10.3 -->
<script src="../static/js/right/jquery.min.js"></script>
<script src="../static/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<!-- Bootstrap -->
<script src="../static/js/bootstrap.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="../static/js/AdminLTE/app.js" type="text/javascript"></script>
<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
<!-- fullCalendar -->
<script src="../static/js/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
<script src="../static/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="../static/js/typeahead-bs2.min.js" type="text/javascript"></script>
<script src="../static/js/plugins/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
<script src="../static/js/bootbox.min.js"></script>

<script src="../static/js/ace.min.js"></script>
<script src="../static/js/ace-elements.min.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<!-- Page specific script -->
<!--<script type="text/javascript">
    $(function () {

        /* initialize the external events
         -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;*/
        function ini_events(ele) {
            ele.each(function () {

                // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                // it doesn't need to have a start or end
                var eventObject = {
                    title: $.trim($(this).text()) // use the element's text as the event title
                };

                // store the Event Object in the DOM element so we can get to it later
                $(this).data('eventObject', eventObject);

                // make the event draggable using jQuery UI
                $(this).draggable({
                    zIndex: 1070,
                    revert: true, // will cause the event to go back to its
                    revertDuration: 0  //  original position after the drag
                });

            });
        }

        ini_events($('#external-events div.external-event'));

        /* initialize the calendar
         -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;*/
        //Date for the calendar events (dummy data)
        var date = new Date();
        var d = date.getDate(),
            m = date.getMonth(),
            y = date.getFullYear();
        $('#calendar').fullCalendar({
            locale:'zh-cn',
            header: {
                left: 'prev,next jint',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            buttonText: {//This is to add icons to the visible buttons
                prev: "<span class='fa fa-caret-left'></span>",
                next: "<span class='fa fa-caret-right'></span>",
                today: '今天',
                month: '月',
                week: '周',
                day: '日'
            },
            events: function (start,end,timezone,callback) {
                var date1=this.getDate().format("YYYY-MM");
                var caldata=[];
                $.ajax({
                    url:'/findCalsById',
                    type: 'GET',
                    dataType: "json",
                    success: function (result) {
                        for(var i=0;i<result.length;i++){
                            caldata.push(result[i]);
                        }
                        var events=[];
                        $.each(caldata,function (key,value) {
                            events.push({
                                title:value.content,
                                start:value.date1,
                                color:'#FFEBAC'
                            });
                        });
                        callback(events);
                    },
                    error: function () {
                        alert("加载数据失败！")
                    }
                });
            },
            events: function (start,end,timezone,callback) {
                var date1=this.getDate().format("YYYY-MM");
                var caldata=[];
                $.ajax({
                    url:'/updateCalsById',
                    type: 'GET',
                    data:{"content":content,"date":date}
                    dataType: "json",
                    success: function (result) {
                        if (result.success) {
                            $('#calendar'). fullCalendar ( 'refetchEvents' );
                            $("#addObjcectInputModalEdit").modal("hide");//隐藏弹出框
                        }
                    },
                    error: function () {
                        alert("加载数据失败！")
                    }
                });
            },
            events: function (start,end,timezone,callback) {
                var date1=this.getDate().format("YYYY-MM");
                var caldata=[];
                $.ajax({
                    url:'/addCals',
                    type: 'GET',
                    data:{"content":content,"date":date}
                    dataType: "json",
                    success: function (result) {
                        if (result.success) {
                            $('#calendar'). fullCalendar ( 'refetchEvents' );
                            $("#addObjcectInputModalEdit").modal("hide");//隐藏弹出框
                        }
                    },
                    error: function () {
                        alert("加载数据失败！")
                    }
                });
            },
            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar !!!
            drop: function (date, allDay) { // this function is called when something is dropped
                // retrieve the dropped element's stored Event Object
                var originalEventObject = $(this).data('eventObject');
                // we need to copy it, so that multiple events don't have a reference to the same object
                var copiedEventObject = $.extend({}, originalEventObject);
                // assign it the date that was reported
                copiedEventObject.start = date;
                copiedEventObject.allDay = allDay;
                copiedEventObject.backgroundColor = $(this).css("background-color");
                copiedEventObject.borderColor = $(this).css("border-color");
                // render the event on the calendar
                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

                // is the "remove after drop" checkbox checked?
                if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove();
                }
            },
            selectable: true,
            selectHelper: true,
            select: function (start, end, allDay) {
                bootbox.prompt("New Event Title:", function (title) {
                    if (title !== null) {
                        calendar.fullCalendar('renderEvent',
                            {
                                title: title,
                                start: start,
                                end: end,
                                allDay: allDay
                            },
                            true // make the event "stick"
                        );
                    }
                });
                calendar.fullCalendar('unselect');
            },
            eventClick: function (calEvent, jsEvent, view) {
                var form = $("<form class='form-inline'><label>Change event name &nbsp;</label></form>");
                form.append("<input class='middle' autocomplete=off type=text value='" + calEvent.title + "' /> ");
                form.append("<button type='submit' class='btn btn-sm btn-success'><i class='icon-ok'></i> Save</button>");
                var div = bootbox.dialog({
                    message: form,
                    buttons: {
                        "close": {
                            "label": "<i class='icon-remove'></i> Close",
                            "className": "btn-sm"
                        }
                    }
                });
                form.on('submit', function () {
                    calEvent.title = form.find("input[type=text]").val();
                    calendar.fullCalendar('updateEvent', calEvent);
                    div.modal("hide");
                    return false;
                });
            }

        });
        /* ADDING EVENTS */
        var currColor = "#f56954"; //Red by default
        //Color chooser button
        var colorChooser = $("#color-chooser-btn");
        $("#color-chooser > li > a").click(function (e) {
            e.preventDefault();
            //Save color
            currColor = $(this).css("color");
            //Add color effect to button
            colorChooser
                .css({"background-color": currColor, "border-color": currColor})
                .html($(this).text() + ' <span class="caret"></span>');
        });
        $("#add-new-event").click(function (e) {
            e.preventDefault();
            //Get value and make sure it is not null
            var val = $("#new-event").val();
            if (val.length == 0) {
                return;
            }
            //Create event
            var event = $("<div />");
            event.css({
                "background-color": currColor,
                "border-color": currColor,
                "color": "#fff"
            }).addClass("external-event");
            event.html(val);
            $('#external-events').prepend(event);
            //Add draggable funtionality
            ini_events(event);
            //Remove event from text input
            $("#new-event").val("");
        });

    });
</script>-->
<script type="text/javascript">
    jQuery(function($) {
        /* initialize the external events
            -----------------------------------------------------------------*/
        $('#external-events div.external-event').each(function() {
            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
            // it doesn't need to have a start or end
            var eventObject = {
                title: $.trim($(this).text()) // use the element's text as the event title
            };
            // store the Event Object in the DOM element so we can get to it later
            $(this).data('eventObject', eventObject);
            // make the event draggable using jQuery UI
            $(this).draggable({
                zIndex: 999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 0  //  original position after the drag
            });
        });

        /* initialize the calendar
        -----------------------------------------------------------------*/
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        var calendar = $('#calendar').fullCalendar({
            locale:'zh-cn',
            header: {
                left: 'prev,next jint',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            buttonText: {//This is to add icons to the visible buttons
                prev: "<span class='fa fa-caret-left'></span>",
                next: "<span class='fa fa-caret-right'></span>",
                today: '今天',
                month: '月',
                week: '周',
                day: '日'
            },
            events: [

                {
                    title: '修改管理员M2的个人信息',
                    start: new Date(y, m, 1),
                    className: 'label-important'
                },
                {
                    title: '添加一个人员',
                    start: new Date(y, m, d-1),
                    end: new Date(y, m, d-1),
                    className: 'label-success'
                },
                {
                    title: '反馈系统BUG',
                    start: new Date(y, m, d-3, 16, 0),
                    allDay: false
                }]
            ,
            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar !!!
            drop: function(date, allDay) { // this function is called when something is dropped
                // retrieve the dropped element's stored Event Object
                var originalEventObject = $(this).data('eventObject');
                var $extraEventClass = $(this).attr('data-class');
                // we need to copy it, so that multiple events don't have a reference to the same object
                var copiedEventObject = $.extend({}, originalEventObject);
                // assign it the date that was reported
                copiedEventObject.start = date;
                copiedEventObject.allDay = allDay;
                if($extraEventClass) copiedEventObject['className'] = [$extraEventClass];
                // render the event on the calendar
                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
                // is the "remove after drop" checkbox checked?
                if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove();
                }
            }
            ,
            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) {
                bootbox.prompt("添加事件:", function(title) {
                    if (title !== null) {
                        calendar.fullCalendar('renderEvent',
                            {
                                title: title,
                                start: start,
                                end: end,
                                allDay: allDay
                            },
                            true // make the event "stick"
                        );
                    }
                });
                calendar.fullCalendar('unselect');
            }
            ,
            eventClick: function(calEvent, jsEvent, view) {
                var form = $("<form class='form-inline'><label>修改事件 &nbsp;</label></form>");
                form.append("<input class='middle' autocomplete=off type=text value='" + calEvent.title + "' /> ");
                form.append("<button type='submit' class='btn btn-sm btn-success'><i class='icon-ok'></i> 保存</button>");
                var div = bootbox.dialog({
                    message: form,
                    buttons: {
                        "delete" : {
                            "label" : "<i class='icon-trash'></i> 删除事件",
                            "className" : "btn-sm btn-danger",
                            "callback": function() {
                                calendar.fullCalendar('removeEvents' , function(ev){
                                    return (ev._id == calEvent._id);
                                })
                            }
                        } ,
                        "close" : {
                            "label" : "<i class='icon-remove'></i> 关闭",
                            "className" : "btn-sm"
                        }
                    }
                });
                form.on('submit', function(){
                    calEvent.title = form.find("input[type=text]").val();
                    calendar.fullCalendar('updateEvent', calEvent);
                    div.modal("hide");
                    return false;
                });
            }
        });
    })
</script>
</body>
</html>